<template>
    <div>
        <hd-tab :tabs="tabs"></hd-tab>

        <el-card :body-style="{ padding: '10px' }" shadow="never">
            <div slot="header">
                预约列表
            </div>
            <div class="card-body">
                <el-table
                    :data="orders.data"
                    border
                    size="mini"
                    style="width: 100%">
                    <el-table-column
                        label="ID"
                        prop="id"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        label="用户名称"
                        prop="name">
                    </el-table-column>
                    <el-table-column
                        label="用户手机号"
                        prop="mobile">
                    </el-table-column>
                    <el-table-column #default="{row:order}" label="当前状态">
                        <el-tag v-if="order.status=='-1'" size="mini" type="info"> 失败</el-tag>
                        <el-tag v-else-if="order.status=='0'" size="mini" type="warning"> 待办</el-tag>
                        <el-tag v-else size="mini" type="success"> 成功</el-tag>
                    </el-table-column>
                    <el-table-column
                        #default="{row:order}"
                        label="操作"
                    >
                        <el-button-group>
                            <el-button size="mini" type="primary"
                                       @click="$router.push({name:'admin.order.edit', params:{ id: order.id }})">
                                处理
                            </el-button>
                        </el-button-group>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                        :current-page="orders.meta.current_page"
                        :page-size="10"
                        :total="orders.meta.total"
                        background
                        layout="total,prev, pager, next"
                        @current-change="load"
                    >
                    </el-pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import tabs from './tabs'

export default {
    route: {name: 'admin.order.index', meta: {title: '预约列表'}},
    data() {
        return {
            orders: {meta: {}},
            effect: null,
            tabs
        }
    },
    async created() {
        await this.load()

    },
    methods: {
        async load(page = 1) {
            this.orders = await this.axios.get(`admin/order?page=${page}`);
        },

    }

}
</script>

<style scoped>

</style>
